<template>
    <div class="loading" :style="{ width, height }">
        <div class="line" :style="{ backgroundColor: color }"></div>
        <div class="line" :style="{ backgroundColor: color }"></div>
        <div class="line" :style="{ backgroundColor: color }"></div>
        <div class="line" :style="{ backgroundColor: color }"></div>
        <div class="line" :style="{ backgroundColor: color }"></div>
    </div>
</template>

<script setup lang="ts">
    defineProps<{
        color: string
        width: string
        height: string
    }>()
</script>

<style scoped lang="scss">
    .loading {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .line {
            width: 10%;
            height: 100%;
            animation: dence 0.9s 0s infinite
                cubic-bezier(0.11, 0.49, 0.38, 0.78);

            &:nth-child(2),
            &:nth-child(4) {
                animation-delay: 0.25s;
            }
            &:nth-child(1),
            &:nth-child(5) {
                animation-delay: 0.5s;
            }
        }
    }

    @keyframes dence {
        0% {
            transform: scaleY(1);
        }
        60% {
            transform: scaleY(0.3);
        }
        90% {
            transform: scaleY(1);
        }
    }
</style>
